<template>
	<view style="width: 100%;">
		<view class="u-page">
			<u-toast ref="uToast"></u-toast>
			<u-loading-page :loading="loading" bg-color="#e8e8e8"></u-loading-page>

			<u-row customStyle="margin: 10px">
				<u-col span="3">
					<u-button type="primary" icon="reload" @click="getList" shape="circle" text="刷新状态">
					</u-button>
				</u-col>
				<u-col span="3"></u-col>
				<u-col span="2">
					<view class="u-slot-title">
						<u-tag v-show='!serviceApply.startTime' text="未签到" plain type="warning"></u-tag>
						<u-tag v-show='serviceApply.startTime' text="已签到" plain type="success"></u-tag>
					</view>
				</u-col>
				<u-col span="1"></u-col>
				<u-col span="3">
					<u-button type="primary" style="text-align: right;" icon="map" shape="circle"
						@click="handel_sign_click" text="签到"></u-button>
				</u-col>
			</u-row>

			<!-- <u-row customStyle="margin: 10px">
				<u-col span="3">
					<u-button type="primary" icon="reload" @click="getList" shape="circle" text="刷新状态">
					</u-button>
				</u-col>
				<u-col span="6">
					<u--text text="签到状态:"></u--text>
					<u--text v-show='!serviceApply.startTime' type="error" text="未签到"></u--text>
					<u--text v-show='serviceApply.startTime' type="success" text="已签到"></u--text>
				</u-col>
				<u-col span="3">
					<u-button type="primary" style="text-align: right;" icon="map" shape="circle"
						@click="handel_sign_click" text="签到"></u-button>
				</u-col>
			</u-row> -->

			<u-modal width="450rpx" :show="show_signing" :show-close="false" :showConfirmButton="false">
				<view class="slot-content">
					<u-loading-icon mode="circle" text="签到中" textSize="18"></u-loading-icon>
				</view>
			</u-modal>

			<!-- <u-modal :show="show_outsideReason" title="定位超出范围" @confirm="handle_outsideReason_confirm">
				<view class="slot-content">
					<view class="slot-content">
						<u--textarea v-model="serviceApply.attribute1" placeholder="请填写定位超出范围原因,用于记录,不能为空"
							maxlength="50"></u--textarea>
					</view>
				</view>
			</u-modal> -->

			<!-- <u-row customStyle="margin: 5px">
				<u-col span="10">
					<u-search style="z-index: 999;" :disabled='true' bgColor="rgb(255 255 255)" placeholder="搜索"
						shape="round" @click="handle_SearchBox_click" :showAction="false" :animation="true"></u-search>
				</u-col>
				<u-col span="2">
					<u-button type="primary" icon="reload" @click="handleReflashClick" size="small" shape="circle"
						text="连接">
					</u-button>
				</u-col>
			</u-row> -->

			<!-- <u-popup :show="show" @close="close" @open="open">
				<view style="width: 93%;align-self: center;">
					<u--form labelWidth='auto' labelPosition="left" :model="queryParamsForm" :rules="rules" ref="form1">
						<u-form-item label="申请人姓名" prop="name" borderBottom ref="item1">
							<u--input inputAlign='center' shape='square' border="none" v-model="queryParamsForm.name">
							</u--input>
						</u-form-item>
						<u-form-item label="申请人身份证号码" prop="idNumber" borderBottom ref="item1">
							<u--input inputAlign='center' shape='square' border="none"
								v-model="queryParamsForm.idNumber">
							</u--input>
						</u-form-item>
					</u--form>
					<u-row customStyle="margin:10px">
						<u-col span="12">
							<u-button class="custom-style" type="primary" size="small" @click="handel_search_click">搜索
							</u-button>
						</u-col>
					</u-row>
					<u-row customStyle="margin:10px">
						<u-col span="12">
							<u-button class="custom-style" type="primary" size="small" @click="handel_reset_click">重置
							</u-button>
						</u-col>
					</u-row>
				</view>
			</u-popup> -->

			<u-row customStyle="margin-bottom: 10px ">
				<u-col span="12">
					<u-empty v-if="DataList.length == 0" mode="list"></u-empty>
					<u-cell-group customStyle='background-color: white;' v-else>
						<u-cell v-for="(item, index) in DataList" :key="item.muId" size="large" isLink clickable
							@click="handel_cell_click" :name="item.uuid">
							<view slot="title" class="u-slot-title">
								<text class="u-cell-text">{{ item.muName }}</text>
								<u-tag v-if="item.comStatus == '服务完成'" text="服务完成" plain size="mini" type="success">
								</u-tag>
								<u-tag v-else-if="item.comStatus == '待服务'" text="待服务" color="#C6C7CB"
									borderColor="#C6C7CB" plain size="mini">
								</u-tag>
							</view>
						</u-cell>
					</u-cell-group>
					<uni-load-more :status="status" :contentText="loadText" @clickLoadMore="MyonLoad" />
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	//app页面:改造施工项目
	//1.获取老人信息列表，下拉继续加载
	//2.提供条件搜索选项
	//3.点击单个老人信息跳转到老人详情
	//4.新增录入老人信息
	import {
		transformPostBody,
		transformRequestURL
	} from "@/utils/requestParams.js";

	import {
		GetDatetime
	} from "@/utils/stringFormat.js";

	import {
		QueryRTInfoList,
		addRTInfo,
		updateRTInfo,
		getRTInfo,
		delRTInfo,
		QueryRTInfoHistory
	} from "@/api/elder/RTInfo.js";

	import {
		listSlhgzresqjl,
		getSlhgzresqjl,
		delSlhgzresqjl,
		addSlhgzresqjl,
		updateSlhgzresqjl,
	} from "@/api/elder/serviceApply.js";

	import {
		listSlhgzfwwc,
		getSlhgzfwwc,
		delSlhgzfwwc,
		addSlhgzfwwc,
		updateSlhgzfwwc,
	} from "@/api/elder/serviceApply_SMFW.js";

	import {
		QueryDeviceInstallList,
		addDeviceInstall,
		updateDeviceInstall,
		getDeviceInstall,
		delDeviceInstall,
		QueryDeviceInstallHistory,
		QueryDeviceInstallDev
	} from "@/api/elder/DeviceInstall";

	import {
		GetDistance
	} from "@/utils/map.js";
	export default {
		name: "GZSG_index",
		components: {},
		data() {
			return {
				onLoadDone: false,
				DataList: [],
				total: 0, //条目总数，用户加载更多
				id: null, //服务申请唯一号
				checkIn: false, //自动签到
				show_signing: false, //签到窗口
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 150,
					taskId: null,
					packageName: null,
					itemName: null,
					beforeTaskImg: null,
					afterTaskImg: null,
					taskDetail: null,
					status: null,
					taskStarttime: null,
					taskEndtime: null,
					checkStarttime: null,
					checkEndtime: null,
					checkDetails: null,
					checkName: null,
					checkImg: null,
					remark: null,
					deviceType: null,
					deviceId: null,
					applyNo: null,
					apply_idno: null,
				},
				serviceApply: {
					searchValue: null,
					createBy: null,
					createTime: null,
					updateBy: null,
					updateTime: null,
					remark: null,
					params: {},
					id: null,
					taskId: null,
					taskTypeCode: null,
					taskTypeName: null,
					begName: null,
					begTime: null,
					serverType: null,
					serverId: null,
					serverName: null,
					elderId: null,
					elderName: null,
					elderIdno: null,
					taskProvince: null,
					taskCity: null,
					taskDistrict: null,
					taskTown: null,
					taskVillage: null,
					taskStreet: null,
					taskRegisterAdd: null,
					taskLongitude: null,
					taskLatitude: null,
					planStartTime: null,
					planEndTime: null,
					startTime: null,
					endTime: null,
					status: null,
					taskDetail: null,
					isSelfSign: null,
					elderSign: null,
					approveName: null,
					approveResult: null,
					approveOpinion: null,
					star: null,
					appraise: null,
					realLongitude: null,
					realLatitude: null,
					attribute1: null,
					attribute2: null,
					attribute3: null,
					attribute4: null,
					attribute5: null,
					attribute6: null,
					attribute7: null,
					attribute8: null,
					attribute9: null,
					attribute10: null,
					attribute11: null,
					attribute12: null,
					attribute13: null,
					attribute14: null,
					attribute15: null,
					attribute16: null,
					attribute17: null,
					attribute18: null,
					attribute19: null,
					attribute20: null,
					attribute21: null,
					attribute22: null,
					attribute23: null,
					attribute24: null,
					attribute25: null,
					attribute26: null,
					attribute27: null,
					attribute28: null,
					attribute29: null,
					attribute30: null,
					attribute31: null,
					attribute32: null,
					defaultCommision: null,
					realCommision: null,
					commisionPay: null,
					prodToprice: null,
					prodRealpay: null,
					prodPay: null,
				},
				rules: {},
				loading: false, //加载中提示框显示
				show: false, //搜索框显示
				finished: false, //加载更多完结
				status: 'more', // 显示底部提示
				loadText: {
					contentdown: "点击加载更多",
					contentrefresh: "正在加载",
					contentnomore: "没有更多数据了",
				},

				location: null, //位置信息字符串
				targetDistance: 5, //限制定位与用户登记位置的最大误差距离（千米）
				Distance: 0,
				signStatu: '', //签到状态，成功，失败
				show_outsideReason: false, //超范围原因框
				isOutside: false, //是否超出范围
			}
		},
		watch: {},
		computed: {
			getItemLabel() {
				return function(item) {
					let result = "";
					if (item.status) result += item.status
					// if (item.status) result += item.status + ':'
					// if (item.taskStarttime) result += item.taskStarttime
					// if (item.taskEndtime) result += '-' + item.taskEndtime
					return result
				}
			},
			// GetLocation() {
			// 	if (this.location)
			// 		return '位置:' + this.location
			// 	else return '位置:' + '请点击签到获取'
			// },
		},
		onLoad: function(options) {
				console.log('onLoad', options.id);
				this.id = options.id
				// //获取服务申请单条信息
				getSlhgzresqjl(this.id).then((response) => {
					console.log('onLoad response', response);
					this.onLoadDone = true; //加载完成
					this.queryParams.taskId = response.data.taskId //将老人id保存
					this.serviceApply = response.data
					this.getList();
				});
			},
		onShow() {
			console.log('onShow');
			//同步等待onLoadDone，直到为true才执行
			if (this.onLoadDone) {
				this.finished = false; //重置搜索完结
				this.queryParams.pageNum = 1; //重置搜索页
				this.getList();
			}
		},
		methods: {
			// //获取设备连接状态
			// update_connetStatus() {
			// 	this.DataList.map((item) => {
			// 		if (item.comStatus == '完成') { //已安装设备
			// 			if (item.prodType == '智能设备') //智能设备才需要检测
			// 			{
			// 				if (item.prodSn) {
			// 					QueryDeviceInstallDev(item.prodSn).then((response) => {
			// 						if (response.code == '200' && response.rows.length > 3) {
			// 							this.$set(item, 'connetStatus', '已连接')
			// 						} else {
			// 							this.$set(item, 'connetStatus', '未连接')
			// 						}
			// 					})
			// 				} else {
			// 					this.$set(item, 'connetStatus', '未安装')
			// 				}
			// 			} else {
			// 				this.$set(item, 'connetStatus', '已安装')
			// 			}
			// 		} else {
			// 			this.$set(item, 'connetStatus', '未安装')
			// 		}
			// 	});
			// },
			MyonLoad(e) {
				this.status = 'loading';
				if (this.DataList.length < this.total) {
					this.fetch();
					this.status = 'more';
				} else {
					// all data loaded
					this.finished = true;
					this.status = 'nomore';
				}
				e.detail = {
					status: 'loading'
				};
				return e;
			},
			//签到
			handel_sign_click() {
				if (this.isOutside) {
					this.show_outsideReason = true;
					return;
				}
				this.show_signing = true;
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					isHighAccuracy: true,
					success: (res) => {
						this.show_signing = false;
						this.location = (res.address.province + res.address.city + res.address
							.district + res.address.street + res.address.streetNum + res
							.address.poiName)
						this.serviceApply.realLatitude = res.latitude
						this.serviceApply.realLongitude = res.longitude
						// this.signLocation.latitude = res.latitude
						// this.signLocation.longitude = res.longitude
						//比较目标距离(需要申请人信息)
						let Distance = GetDistance(this.serviceApply.taskLatitude, this.serviceApply
							.taskLongitude, this.serviceApply.realLatitude, this.serviceApply
							.realLongitude
						)
						this.Distance = Distance * 1000
						this.signStatu = "成功";
						this.updateSignLocationAndReason();
						// if (Distance <= this.targetDistance) {
						// 	//距离内
						// 	this.signStatu = "成功";
						// 	this.updateSignLocationAndReason();
						// 	this.$refs.uToast.show({
						// 		type: 'success',
						// 		message: "签到成功",
						// 		iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
						// 		complete() {}
						// 	})
						// } else {
						// 	//超出距离,需要填写理由
						// 	this.show_outsideReason = true;
						// 	//签到时间传入作为改造开始时间的默认值/或者签到直接更新每一个的改造开始时间
						// }
					},
					fail: (res) => {
						console.log('定位失败：' + res);
						this.signStatu = "失败";
						this.$refs.uToast.show({
							type: 'fail',
							message: "定位失败：" + res,
							complete() {}
						})
						this.location = '定位失败,请检查设备定位权限是否开启'
					},
				});
			},
			// //填写原因确认框
			// handle_outsideReason_confirm() {
			// 	if (!this.serviceApply.attribute1) {
			// 		this.$refs.uToast.show({
			// 			type: 'error',
			// 			message: "原因不能为空",
			// 			iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png',
			// 			complete() {}
			// 		})
			// 		return
			// 	}
			// 	this.show_outsideReason = false
			// 	this.signStatu = "成功";
			// 	this.updateSignLocationAndReason();
			// 	this.$refs.uToast.show({
			// 		type: 'success',
			// 		message: "签到成功",
			// 		iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
			// 		complete() {}
			// 	})
			// },
			//更新签到地点和理由
			updateSignLocationAndReason() {
				this.serviceApply.planStartTime = GetDatetime();
				let partParmeter = {
					"id": this.serviceApply.id,
					"realLatitude": this.serviceApply.realLatitude,
					"realLongitude": this.serviceApply.realLongitude,
					//"attribute1": this.serviceApply.attribute1,
					"attribute2": this.Distance,
					"startTime": this.serviceApply.planStartTime
				}
				updateSlhgzresqjl(partParmeter).then((response) => {
					if (response.code == 200) {
						this.$refs.uToast.show({
							type: 'success',
							message: "签到成功",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
							complete() {}
						})
						//更新信息-签到状态
						getSlhgzresqjl(this.id).then((response) => {
							this.queryParams.taskId = response.data.taskId //将老人id保存
							this.serviceApply = response.data
						});
					} else {
						this.$refs.uToast.show({
							type: 'fail',
							message: "签到失败",
							complete() {}
						})
					}
				});
			},
			handel_cell_click(id) {
				this.$tab.navigateTo('/pages/ShangMenFuWu/SMFW/detail?id=' + id.name + '&shenqingId=' + this
					.id) //把当前id传进去用于获取签到验证
			},
			fetch() {
				this.queryParams.pageNum = this.queryParams.pageNum + 1;
				listSlhgzfwwc(
					this.queryParams
				).then((response) => {
					this.DataList = this.DataList.concat(response.rows);
					this.total = response.total;
					// this.update_connetStatus();
				});
			},
			getList() {
				this.loading = true;
				listSlhgzfwwc(
					this.queryParams
				).then((response) => {
					console.log('listSlhgzfwqd 上门服务', response)
					this.loading = false;
					this.DataList = response.rows;
					this.total = response.total;
					// this.update_connetStatus();
					//load-more状态更新
					if (this.DataList.length < this.total) {
						this.status = 'more';
					} else {
						this.status = 'nomore';
					}
				});
			},
		},
	}
</script>

<style scoped>
	.custom-style {
		width: 90%;
		font-weight: bolder;
		font-size: 15px;
	}

	.u-slot-title {
		display: flex;
		align-items: center;
		/* 垂直居中 */
	}

	.u-cell-text {
		margin-right: 10px;
		/* 可根据需要调整元素间的间距 */
	}

	.slot-content {
		width: 90%;
		/* 自定义宽度 */
		margin: 0 auto;
		/* 水平居中 */
	}

	.status-col {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.status-wrapper {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
</style>